<!--
 * @Description: 多租户时，下拉选择切换租户
 * @Author: DHL
 * @Date: 2021-12-10 15:46:51
 * @LastEditors: DHL
 * @LastEditTime: 2023-08-04 15:15:00
-->

<template>
  <div class="multitenant-container">
    <el-popover
      placement="bottom-start"
      trigger="hover"
      :width="200"
      :offset="-3"
      popper-class="multitenant_popover"
      @beforeEnter="handleShow"
      @hide="handleHide"
    >
      <template #reference>
        <div class="multitenant_title" :class="show ? 'multitenant-hover' : ''">
          租户：{{ tenantName }}
          <svg-icon :iconClass="show ? 'up' : 'down'"></svg-icon>
        </div>
      </template>

      <template #default>
        <div class="multitenant_popover-title">
          已注册租户：
          <el-tag type="danger" effect="dark">
            {{ loginUserStore.appNum }}
          </el-tag>
        </div>
        <el-divider />
        <div class="multitenant_popover-list">
          <div
            class="multitenant_popover-item"
            v-for="item in tenantList"
            :key="item.id"
            @click="handleClickTenant(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useLoginUserStore } from '@/store/modules/loginUser'
  import { apiTenantInfoSearchList } from '@/api/system/tenantInfo'
  import { TenantInfoModel } from '@/api/system/model/tenantInfoModel'
  import { isEmpty } from '@/utils/isUtils'

  const loginUserStore = useLoginUserStore()

  const tenantList = ref<Array<TenantInfoModel>>([])

  const tenantName = ref('')

  const show = ref(false)

  /**
   * 显示
   */
  function handleShow() {
    show.value = true
  }

  /**
   * 隐藏
   */
  function handleHide() {
    show.value = false
  }

  /**
   * 查询租户
   */
  function handleSearch() {
    apiTenantInfoSearchList().then((result) => {
      if (result?.success) {
        tenantList.value = result.data

        if (isEmpty(loginUserStore.tenantId)) {
          const tenant = tenantList.value[0]
          handleClickTenant(tenant)
        } else {
          tenantList.value.forEach((item) => {
            if (item.id === loginUserStore.tenantId) {
              tenantName.value = item.name
            }
          })
        }
      }
    })
  }

  /**
   * 切换租户
   */
  function handleClickTenant(tenant: TenantInfoModel) {
    tenantName.value = tenant.name
    loginUserStore.switchTenantAction(tenant.id || '')
  }

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onMounted(() => {
    handleSearch()
  })
</script>

<style scoped lang="scss">
  .multitenant-container {
    padding: 0px 10px;
    cursor: pointer;
    .multitenant_title {
      font-size: 14px;
      color: #909399;

      &.multitenant-hover {
        color: #606266;
      }
    }
  }
</style>

<style lang="scss">
  .multitenant_popover {
    cursor: pointer;

    .el-divider {
      margin: 10px 0px 0px 0px;
    }

    .multitenant_popover-title {
      font-size: 14px;
    }

    .multitenant_popover-list {
      font-size: 14px;

      .multitenant_popover-item {
        padding: 8px 0px;
        color: #909399;

        &:hover {
          color: #606266;
        }
      }
    }
  }
</style>
